<template>
    <mgs-app :scheme-config="schemeConfig" />
</template>

<script>
// 映入要使用的组件
import Vue from 'vue';

// 布局
import MgsLyOnlinemap from '@mgs/components-layout/mgs-ly-onlinemap.vue';
Vue.component('MgsLyOnlinemap', MgsLyOnlinemap);

// 地图
import MgsMapView from '@mgs/components-map/mgs-map-view.vue';
Vue.component('MgsMapView', MgsMapView);

// 模块
import views from './views';
Vue.use(views);

// 缩放控件
import MgsZoom from '@mgs/components-map/mgs-ctrl-zoom.vue';
// 地图切换
import MgsMapSwtich from '@mgs/components-map/mgs-ctrl-map-switch.vue';
// 方案切换
import MgsBasemapSwitch from '@mgs/components-map/mgs-ctrl-basemap-switch.vue';
// 搜索栏
import MgsSearchInput from '@mgs/components-basic/mgs-search-input.vue';
// 工具栏
import MgsToolbarV1 from '@mgs/components-map/mgs-toolbar-v1.vue';
// 位置控件
import MgsPosScale from '@mgs/components-map/mgs-ctrl-pos-scale.vue';
// 比例尺
import MgsScale from '@mgs/components-map/mgs-ctrl-scale.vue';
// 罗盘
import Mgs3dNav from '@mgs/components-map/mgs-ctrl-3dnav.vue';
// 注册组件
Vue.component('MgsZoom', MgsZoom);
Vue.component('MgsMapSwtich', MgsMapSwtich);
Vue.component('MgsBasemapSwitch', MgsBasemapSwitch);
Vue.component('MgsSearchInput', MgsSearchInput);
Vue.component('MgsToolbarV1', MgsToolbarV1);
Vue.component('MgsPosScale', MgsPosScale);
Vue.component('MgsScale', MgsScale);
Vue.component('Mgs3dNav', Mgs3dNav);

// 工具
import mgsTool from '@mgs/components-tool';
Vue.use(mgsTool);

// 图例
import Legend from './Legend.vue';
Vue.component('Legend', Legend);

// 表单项
import MgsIMapDraw from '@mgs/components-item/mgs-i-map-draw.vue';
import MgsICheckGroup from '@mgs/components-item/mgs-i-check-group.vue';
Vue.component('MgsIMapDraw', MgsIMapDraw);
Vue.component('MgsICheckGroup', MgsICheckGroup);

// 轨迹播放
import MgsTrackPlayer from '@mgs/components/mgs-track-player-operate.vue';
Vue.component('MgsTrackPlayer', MgsTrackPlayer);

// 方案配置
import schemeConfig from './schemeConfig';

export default {
    name: 'App',
    data() {
        return {
            schemeConfig,
        };
    },
};
</script>

<style lang="scss">
@import '~@mgs/themes/var.scss';
@import '~@mgs/themes/mixins.scss';

body {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

/* ----- dialog弹出框样式重写 ------ */
$--color-dialog-theme: #5099ea;

.el-dialog {
    &:not([style*='width'], .is-fullscreen, .mgs-drag) {
        width: 900px;
        height: 700px;
    }

    @include flex(column);

    &__header {
        height: 24px;
        padding: 4px 5px;
        background-color: $--color-dialog-theme;
    }
    &__title,
    &__close,
    &__close:hover {
        color: #fff !important;
        font-size: 16px;
    }
    &__headerbtn {
        top: 8px;
        right: 5px;
    }

    &__body {
        flex: 1;
        height: 0;
        padding: 10px;
        overflow-y: auto;
    }

    &__footer {
        padding: 0 10px;
        height: 48px;
        line-height: 48px;
        background: #f5f5f5;
    }
}
</style>
